<template>  
  <div>  
    <el-row type="flex" class="row-bg" justify="center"  style="flex-wrap: wrap;">
          <el-col :span="18" v-for="news in news" :key="news.id">
          <el-col :span="4"><div class=""><img src="../../assets/logo.png" alt=""></div></el-col>
          <el-col :span="20">
          <div class="">
            <h1>{{news.title}}</h1>
            <p class="text-container">{{news.news}}</p>
            </div>
          </el-col>
        </el-col>       
</el-row>
  </div>  
</template>  
  
<script>  
  export default {
    data() {
      return {
          news:[
            {id:1,title:'标题1',news:'111111111111111111111111111111111111111111111111111111111'},
            {id:2,title:'标题2',news:'111111111111111111111111111111111111111111111111111111111'},
            {id:3,title:'标题3',news:'111111111111111111111111111111111111111111111111111111111'},
            {id:4,title:'标题4',news:'111111111111111111111111111111111111111111111111111111111'},
            {id:5,title:'标题5',news:'111111111111111111111111111111111111111111111111111111111'},
        ]
      }
    }
  };
</script>  
  
<style scoped>  
img{
  width: 176px;
  height: 105px;
}
    .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .text-container {  
  width: 500px; /* 根据你的需求设置宽度 */  
  white-space: nowrap; /* 禁止文本换行 */  
  overflow: hidden; /* 隐藏超出容器的内容 */  
  text-overflow: ellipsis; /* 设置超出时显示省略号 */  
}
</style>